<script setup lang="ts">
import { reactive, Reactive } from 'vue'

let product=reactive({//对象,数组的双向绑定；ref简单变量的双向绑定改值的时候要加.value
    proId:101,
    proName:"手机壳",
    proPrice:29
})

//数组
const list=reactive([1,2,3])
console.log("原数组:"+list)
list.push(4)
console.log("改后的数组:"+list)

function showInfo(){
    product.proPrice+=10
    console.log(product)
    console.log(product.proId)
    console.log(product.proName)
    console.log(product.proPrice)
}


</script>

<template>
    <div>
        <h2>编辑商品信息</h2>
        商品id：<input type="text" v-model="product.proId"/><br>
        商品名称：<input type="text" v-model="product.proName"/><br>
        商品价格：<input type="text" v-model="product.proPrice"/><br>
        <button @click="showInfo()">显示商品信息</button>
    



    </div>
</template>